<!-- src/views/order/IndexView.vue -->
<template>
    <div id="order">
        <section class="top">
            <h1>
                <img src="../../assets/logo.png" alt="">
            </h1>
        </section>
        <nav>
            <van-tabs class="navv" v-model="active" background='transparent' @click="onClick" color='rgb(2, 182, 253)'
                title-inactive-color='#000' title-active-color='#000' line-width='.18rem'>
                <van-tab :title-style="{fontWeight:activeIndex==index?700:400}" :title="item"
                    v-for='(item ,index) in title' :key='index'></van-tab>
            </van-tabs>
        </nav>
    </div>
</template>
  
<script lang="ts">
export default {
    data(): any {
        return {
            active: 0,
            activeIndex: 0,
            title: ['全部', '待消费', '待评价', '退款']
        }
    },
    methods: {
        onClick(name: any, title: any) {
            this.activeIndex = name
        }
    }
}
</script>
<style scoped lang="scss">
#order {
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);

    .top {
        width: 100%;
        height: 0.43rem;
        background-color: rgb(245, 245, 245);
        overflow: hidden;

        h1 {
            text-align: center;
            line-height: .43rem;
            font-size: .1rem;
            font-weight: 700;
            background-color: rgb(0, 127, 205);

        }


    }

    nav {
        margin-top: .40rem;

    }
}
</style>